<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>SB Admin 2 - Dashboard</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <style>
    #wrapper #content-wrapper {
        overflow-x: visible;
    }
    #loginbtn{
      display: none;
    }
    .p-r{
      position: relative;
    }
    .search-list{
      position: absolute;
      background: rgba(0,0,0, 0.3);
      width: 25rem;
      top: 40px;
    }
    .search-list li{
      list-style-type: none;
      line-height: 40px;
      border-bottom: 1px solid #000;
      color: #333;
    }
  </style>
</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

      <!-- Main Content -->
      <div id="content">

        <!-- Topbar 顶部模块 -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
          <!-- 搜索模块 -->
          <form class="d-none form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search p-r d-inline-block">
            <div class="input-group">
              <input id="search" type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
              <div class="input-group-append">
                <button class="btn btn-primary" type="button">
                  <i class="fas fa-search fa-sm"></i>
                </button>
              </div>
            </div>
            <ul class="search-list d-none">
              <li>你好</li>
              <li>你好</li>
              <li>你好</li>
            </ul>
          </form>

          <!-- Sidebar Toggle (Topbar) -->
          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fa fa-bars"></i>
          </button>

          <!-- Topbar Navbar 头部导航栏 -->
          <ul class="navbar-nav ml-auto">

            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information 用户信息 -->
            <li class="nav-item dropdown no-arrow">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <!-- 用户名 -->
                <span id="username" class="mr-2 d-none small d-lg-inline text-gray-600 ">公羊无衣</span>
                <!-- 登陆按钮 -->
                <span id="loginbtn" class="mr-2 d-none">登录</span>
              </a>
              <!-- Dropdown - User Information  下拉菜单 登出按钮-->
              <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"  id="userDropdownOptions" aria-labelledby="userDropdown">
                <a class="dropdown-item" 
                id="logout"
                href="#" data-toggle="modal" data-target="#logoutModal">
                  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                  登出
                </a>
              </div>
            </li>
          </ul>

        </nav>
        <!-- End of Topbar -->

      </div>
      <!-- End of Main Content -->


    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->



<script src="./js/utils.js"></script>
<script>
  // 1. 点击用户名 显示下拉菜单
  // username 用户名的ID;
  // userDropdownOptions 下拉菜单的ID;
  $("#username").onclick = function(evt){
     var e = evt || event;
     $("#userDropdownOptions").style.display = "block";
     //  ？
     e.stopPropagation();
  }
  // 2. 登出点击 :  d-none 隐藏的类名;  d-lg-inline 显示的类名;
  // 显示登陆按钮,隐藏用户名;
  $("#logout").onclick = function(){
      $("#username").className = "d-none";
      $("#loginbtn").className += " d-lg-inline";
  }
  // 3. 点击外部任意位置,隐藏下拉菜单;
  document.onclick = function(){
    $("#userDropdownOptions").style.display = "none";
  }
  // 4. 点击登录按钮跳转到登陆页面;
  $("#loginbtn").onclick = function(){
     location.href = "./login.html";
  }
  // 5. 页面加载之后获取cookie，把cookie里面的内容放在用户名上。
  // 为啥要用cookie ? 
  window.onload = function(){
    var cookie = getCookie("email");
    if(cookie){
      $("#username").innerHTML = cookie;
    } 
  }

</script>
<script>

  // 百度搜索 : 
  // 1. 输入框事件触发 input 
  // 2. 数据改变就发起请求 => 后端发起请求;
  // 3. 拿到数据，渲染页面;

  // $("#search").oninput = function(){
  //   // 1. 获取数据;
  //   var search_value = this.value;

  //   if(!search_value){
  //     $(".search-list").className = "search-list d-none";
  //     return false;
  //   }

  //   // console.log(search_value) 已经测试没有问题;
  //   // 2. 发送请求;
  //   ajax({
  //     method : "jsonp",
  //     url : "https://www.baidu.com/sugrec",
  //     data : {
  //             pre:1,
  //             p:3,
  //             ie:"utf-8",
  //             json:1,
  //             prod:"pc",
  //             from:"pc_web",
  //             sugsid:"32218,1425,31672,32139,31254,32045,32230,32299,31639",
  //             wd : search_value,
  //             req:2,
  //             csor:5,
  //             cb:"callback",
  //             _:Date.now()
  //     }
  //   })
  //   .then( function( res ){
  //     // console.log(res); 已经测试没有问题;
  //     var list = res.g;
  //     if(list){
  //       // 让元素显示出来;
  //       $(".search-list").className = "search-list"
  //     }else{
  //       // 让元素隐藏;
  //       $(".search-list").className = "search-list d-none";
  //       // 如果没有数据需要渲染则隐藏掉下拉列表;
  //       return false;
  //     }

  //     // 拼接页面;
  //     var html = "";
  //     list.forEach( function( item ){
  //       html += `<li>${item.q}</li>`
  //     })
  //     $(".search-list").innerHTML = html;
  //     //逻辑 : 根据 html是否为空判定 searchlist 的显示隐藏;
  //     console.log(html);
  //   })
  // }

  // 函数节流 :
  // var t = null;
  // $("#search").oninput = function(){
  //   if( t !== null){
  //       return false
  //   }
  //   // 1. 获取数据;
  //   var search_value = this.value;
  //   t = setTimeout(function(){
  //     t = null;
  //     if(!search_value){
  //       $(".search-list").className = "search-list d-none";
  //       return false;
  //     }

  //     // console.log(search_value) 已经测试没有问题;
  //     // 2. 发送请求;
  //     ajax({
  //       method : "jsonp",
  //       url : "https://www.baidu.com/sugrec",
  //       data : {
  //               pre:1,
  //               p:3,
  //               ie:"utf-8",
  //               json:1,
  //               prod:"pc",
  //               from:"pc_web",
  //               sugsid:"32218,1425,31672,32139,31254,32045,32230,32299,31639",
  //               wd : search_value,
  //               req:2,
  //               csor:5,
  //               cb:"callback",
  //               _:Date.now()
  //       }
  //     })
  //     .then( function( res ){
  //       // console.log(res); 已经测试没有问题;
  //       var list = res.g;
  //       if(list){
  //         // 让元素显示出来;
  //         $(".search-list").className = "search-list"
  //       }else{
  //         // 让元素隐藏;
  //         $(".search-list").className = "search-list d-none";
  //         // 如果没有数据需要渲染则隐藏掉下拉列表;
  //         return false;
  //       }

  //       // 拼接页面;
  //       var html = "";
  //       list.forEach( function( item ){
  //         html += `<li>${item.q}</li>`
  //       })
  //       $(".search-list").innerHTML = html;
  //       //逻辑 : 根据 html是否为空判定 searchlist 的显示隐藏;
  //       console.log(html);
  //     })
  //   } , 500)
  // }

  // 函数去抖 ; 
  var t = null;
  $("#search").oninput = function(){
    clearInterval(t);
    // 1. 获取数据;
    var search_value = this.value;
    t = setTimeout(function(){
      t = null;
      if(!search_value){
        $(".search-list").className = "search-list d-none";
        return false;
      }

      // console.log(search_value) 已经测试没有问题;
      // 2. 发送请求;
      ajax({
        method : "jsonp",
        url : "https://www.baidu.com/sugrec",
        data : {
                pre:1,
                p:3,
                ie:"utf-8",
                json:1,
                prod:"pc",
                from:"pc_web",
                sugsid:"32218,1425,31672,32139,31254,32045,32230,32299,31639",
                wd : search_value,
                req:2,
                csor:5,
                cb:"callback",
                _:Date.now()
        }
      })
      .then( function( res ){
        // console.log(res); 已经测试没有问题;
        var list = res.g;
        if(list){
          // 让元素显示出来;
          $(".search-list").className = "search-list"
        }else{
          // 让元素隐藏;
          $(".search-list").className = "search-list d-none";
          // 如果没有数据需要渲染则隐藏掉下拉列表;
          return false;
        }
        // 拼接页面;
        var html = "";
        list.forEach( function( item ){
          html += `<li>${item.q}</li>`
        })
        $(".search-list").innerHTML = html;
        //逻辑 : 根据 html是否为空判定 searchlist 的显示隐藏;
        console.log(html);
      })
    } , 500)
  }




</script>

</body>

</html>
